<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="header-title">立即预定</text>
    </view>

    <!-- 停车场信息（简化，仅展示名称） -->
    <view class="parking-info" v-if="parkingLotInfo">
      <view class="info-row">
        <text class="info-label">停车场：</text>
        <text class="info-value">{{ parkingLotInfo.name }}</text>
      </view>
    </view>

    <!-- 时间选择 -->
    <view class="section">
      <view class="section-title">选择停车时间</view>
      <view class="time-selector">
        <view class="time-item">
          <text class="time-label">入场时间</text>
          <view class="datetime-picker">
            <picker mode="date" :value="entryDate" @change="onEntryDateChange">
              <view class="datetime-value">
                {{ entryDate || "选择日期" }}
              </view>
            </picker>
            <picker mode="time" :value="entryTime" @change="onEntryTimeChange">
              <view class="datetime-value">
                {{ entryTime || "选择时间" }}
              </view>
            </picker>
          </view>
        </view>
        <view class="time-item">
          <text class="time-label">离场时间</text>
          <view class="datetime-picker">
            <picker mode="date" :value="exitDate" @change="onExitDateChange">
              <view class="datetime-value">
                {{ exitDate || "选择日期" }}
              </view>
            </picker>
            <picker mode="time" :value="exitTime" @change="onExitTimeChange">
              <view class="datetime-value">
                {{ exitTime || "选择时间" }}
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>

    <!-- 车牌号输入（简化版） -->
    <view class="section">
      <view class="section-title">车牌号</view>
      <view class="license-input">
        <textarea
          class="license-field license-textarea"
          v-model="licensePlate"
          placeholder="请输入车牌号，如：京A12345"
          maxlength="15"
          :auto-height="false"
          :show-confirm-bar="false"
          @input="onLicensePlateInput"
        />
      </view>
    </view>

    <!-- 联系手机号输入 -->
    <view class="section">
      <view class="section-title">联系手机号</view>
      <view class="phone-input">
        <input
          class="phone-field"
          v-model="contactPhone"
          type="number"
          placeholder="请输入联系手机号"
          maxlength="11"
          @input="onContactPhoneInput"
        />
        <button class="auto-fill-btn" @click="autoFillPhone" v-if="!contactPhone">
          自动填写
        </button>
      </view>
      <view class="phone-tips">
        <text class="tips-text">用于停车场管理员联系您，请确保手机号正确</text>
      </view>
    </view>

    <!-- 停车类型选择 -->
    <view class="section" v-if="parkingLotInfo && hasIndoorOutdoorPricing">
      <view class="section-title">停车类型</view>
      <view class="parking-type-selector">
        <view class="type-options">
          <view
            class="type-option"
            :class="{ active: parkingType === 'indoor' }"
            @click="selectParkingType('indoor')"
          >
            <view class="type-icon">🏠</view>
            <view class="type-info">
              <text class="type-name">室内停车</text>
              <text class="type-desc">室内停车位不用日晒雨淋，爱护车辆推荐</text>
              <text class="type-price" v-if="indoorPriceRange">{{ indoorPriceRange }}</text>
            </view>
            <view class="type-check" v-if="parkingType === 'indoor'">✓</view>
          </view>

          <view
            class="type-option"
            :class="{ active: parkingType === 'outdoor' }"
            @click="selectParkingType('outdoor')"
          >
            <view class="type-icon">🌤️</view>
            <view class="type-info">
              <text class="type-name">室外停车</text>
              <text class="type-desc">室外停车位价格优惠，性价比更高</text>
              <text class="type-price" v-if="outdoorPriceRange">{{ outdoorPriceRange }}</text>
            </view>
            <view class="type-check" v-if="parkingType === 'outdoor'">✓</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 停车类型提示（未启用分别定价时） -->
    <view class="section" v-else-if="parkingLotInfo">
      <view class="section-title">停车类型</view>
      <view class="single-type-info">
        <view class="type-icon">🏠</view>
        <text class="type-text">室内停车（默认）</text>
      </view>
    </view>

    <!-- 优惠券选择 -->
    <view class="section">
      <view class="section-title">优惠券</view>
      <view class="coupon-selector">
        <textarea
          class="coupon-input coupon-textarea"
          v-model="couponCode"
          placeholder="请输入优惠券代码（可选）"
          :auto-height="false"
          :show-confirm-bar="false"
          @input="onCouponInput"
        />
        <button class="coupon-btn" @click="showCouponList">选择优惠券</button>
      </view>
    </view>

    <!-- 费用详情 -->
    <view class="section" v-if="priceInfo">
      <view class="section-title">费用详情</view>
      <view class="price-details">
        <view class="price-row">
          <text class="price-label">停车天数：</text>
          <text class="price-value">{{ priceInfo.duration_days || 0 }} 天</text>
        </view>
        <view class="price-row" v-if="priceInfo.price_breakdown && priceInfo.price_breakdown.description">
          <text class="price-label">计费说明：</text>
          <text class="price-value description">{{ priceInfo.price_breakdown.description }}</text>
        </view>
        <view class="price-row">
          <text class="price-label">停车费用：</text>
          <text class="price-value">¥{{ formatPrice(priceInfo.base_amount || 0) }}</text>
        </view>
        <view class="price-row" v-if="(priceInfo.discount_amount || 0) > 0">
          <text class="price-label">优惠金额：</text>
          <text class="price-value discount">-¥{{ formatPrice(priceInfo.discount_amount || 0) }}</text>
        </view>
        <view class="price-row total">
          <text class="price-label">应付金额：</text>
          <text class="price-value">¥{{ formatPrice(priceInfo.final_amount || 0) }}</text>
        </view>
        <!-- 价格规则提示 -->
        <view class="price-tips" v-if="priceInfo.duration_days">
          <view class="tips-title">💡 计费规则说明</view>
          <view class="tips-content">
            <text class="tips-text">• 采用累计天数收费模式，不足1天按1天计算</text>
            <text class="tips-text">• 1-7天使用累计价格，第8天起每天额外收费</text>
            <text class="tips-text" v-if="priceInfo.duration_days <= 7"> • 您停车{{ priceInfo.duration_days }}天，享受累计优惠价格 </text>
            <text class="tips-text" v-else> • 您停车{{ priceInfo.duration_days }}天，前7天累计价格+后续每天单独计费 </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 预约须知 -->
    <view class="section">
      <view class="section-title" @click="toggleBookingNotice">
        <text>预约须知</text>
        <text class="toggle-icon" :class="{ expanded: showBookingNotice }">{{ showBookingNotice ? '▼' : '▶' }}</text>
      </view>
      <view class="booking-notice" v-if="showBookingNotice">
        <view class="notice-section">
          <view class="notice-title">一、取消政策</view>
          <view class="notice-content">
            <text class="notice-item">1、在预计入场时间前可自助取消，支付的费用全额原路退回支付账户；</text>
            <text class="notice-item">2、超过预计入场时间，取消需支付10%的车位预留服务费，剩余费用将退回至原支付账户。</text>
          </view>
        </view>

        <view class="notice-section">
          <view class="notice-title">二、提前、延后离场遵循多退少补的原则</view>
          <view class="notice-content">
            <text class="notice-item">1、提前离场可按线上收费标准将未停天数部分进行退款，具体退款金额根据车场起停天数、实际停车天数及预约天数计算得出。提前离场退款请给平台在线客服联系；</text>
            <text class="notice-item">2、延迟离场可按照线上收费标准补交尾款，出场时订单里会有一个支付尾款的入口，也可以现场补缴给停车场人员，按照订单收费标准补交尾款，如有疑问可联系平台客服。</text>
          </view>
        </view>

        <view class="notice-section">
          <view class="notice-title">三、修改订单</view>
          <view class="notice-content">
            <text class="notice-item">如需修改信息，请取消订单后重新预订。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" :class="{ disabled: !canSubmit }" :disabled="!canSubmit" @click="submitBooking">
        {{ submitButtonText }}
      </button>
    </view>

    <!-- 优惠券选择弹窗 -->
    <view class="coupon-modal" v-if="showCouponModal" @click="closeCouponModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择优惠券</text>
          <text class="modal-close" @click="closeCouponModal">×</text>
        </view>
        <view class="coupon-list">
          <view class="coupon-item" v-for="coupon in availableCoupons" :key="coupon.code" @click="selectCoupon(coupon)">
            <view class="coupon-info">
              <view class="coupon-name">{{ coupon.name }}</view>
              <view class="coupon-desc">{{ coupon.description }}</view>
              <view class="coupon-expiry">有效期至：{{ formatDate(coupon.expiry_date) }}</view>
            </view>
            <view class="coupon-value">
              <text v-if="coupon.type === 'fixed'" class="value-text">￥{{ coupon.value }}</text>
              <text v-else class="value-text">{{ Math.round((1 - coupon.value) * 10) }}折</text>
            </view>
          </view>
          <view v-if="availableCoupons.length === 0" class="empty-coupon">
            <text class="empty-text">暂无可用优惠券</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { getParkingLotById, getParkingPrice, createParkingOrder, getAvailableCoupons } from "../../api/parking.js"
import { initiatePayment, getUserOpenid } from "../../utils/payment.js"
import { get } from "../../utils/request.js"


// 响应式数据
const parkingLotId = ref<number>(0)
const parkingLotInfo = ref<any>(null)
const entryDate = ref<string>("")
const entryTime = ref<string>("")
const exitDate = ref<string>("")
const exitTime = ref<string>("")
const licensePlate = ref<string>("")
const contactPhone = ref<string>("")

const couponCode = ref<string>("")
const priceInfo = ref<any>(null)
const availableCoupons = ref<any[]>([])
const showCouponModal = ref<boolean>(false)
const loading = ref<boolean>(false)
const parkingType = ref<string>("indoor") // 默认室内停车
const showBookingNotice = ref<boolean>(false) // 预约须知展开状态

// 计算属性
const canSubmit = computed(() => {
  return (
    parkingLotId.value &&
    entryDate.value &&
    entryTime.value &&
    exitDate.value &&
    exitTime.value &&
    licensePlate.value.trim() &&
    contactPhone.value.trim() &&
    priceInfo.value &&
    !loading.value
  )
})

const submitButtonText = computed(() => {
  if (loading.value) return "处理中..."
  if (!canSubmit.value) return "请完善信息"
  if (priceInfo.value && priceInfo.value.final_amount !== undefined) {
    return `立即预定 ¥${priceInfo.value.final_amount}`
  }
  return "立即预定"
})

// 检查是否启用了室内外分别定价
const hasIndoorOutdoorPricing = computed(() => {
  return parkingLotInfo.value &&
         parkingLotInfo.value.price_rules &&
         parkingLotInfo.value.price_rules.indoor_outdoor_enabled &&
         parkingLotInfo.value.price_rules.indoor_prices &&
         parkingLotInfo.value.price_rules.outdoor_prices
})

// 室内价格范围显示
const indoorPriceRange = computed(() => {
  if (!hasIndoorOutdoorPricing.value) return ""

  const prices = parkingLotInfo.value.price_rules.indoor_prices.daily_prices
  if (!prices) return ""

  const day1 = prices.day_1 || 0
  const day7 = prices.day_7 || 0

  if (day1 === 0) return "首日免费"
  if (day1 === day7) return `¥${day1.toFixed(2)}`
  return `¥${day1.toFixed(2)}-${day7.toFixed(2)}`
})

// 室外价格范围显示
const outdoorPriceRange = computed(() => {
  if (!hasIndoorOutdoorPricing.value) return ""

  const prices = parkingLotInfo.value.price_rules.outdoor_prices.daily_prices
  if (!prices) return ""

  const day1 = prices.day_1 || 0
  const day7 = prices.day_7 || 0

  if (day1 === 0) return "首日免费"
  if (day1 === day7) return `¥${day1.toFixed(2)}`
  return `¥${day1.toFixed(2)}-${day7.toFixed(2)}`
})

// 初始化默认时间
const initDefaultTimes = () => {
  const now = new Date()
  const entry = new Date(now.getTime() + 30 * 60 * 1000) // 30分钟后
  const exit = new Date(entry.getTime() + 2 * 60 * 60 * 1000) // 2小时后

  // 设置入场日期和时间
  entryDate.value = entry.toISOString().slice(0, 10) // YYYY-MM-DD
  entryTime.value = entry.toTimeString().slice(0, 5) // HH:MM

  // 设置离场日期和时间
  exitDate.value = exit.toISOString().slice(0, 10) // YYYY-MM-DD
  exitTime.value = exit.toTimeString().slice(0, 5) // HH:MM
}

// 日期时间选择处理
const onEntryDateChange = (e: any) => {
  entryDate.value = e.detail.value
  updatePriceInfo()
}

const onEntryTimeChange = (e: any) => {
  entryTime.value = e.detail.value
  updatePriceInfo()
}

const onExitDateChange = (e: any) => {
  exitDate.value = e.detail.value
  updatePriceInfo()
}

const onExitTimeChange = (e: any) => {
  exitTime.value = e.detail.value
  updatePriceInfo()
}


// 车牌输入处理
const onLicensePlateInput = () => {
  licensePlate.value = licensePlate.value.toUpperCase()
}

// 联系手机号输入处理
const onContactPhoneInput = () => {
  // 只允许输入数字，最多11位
  contactPhone.value = contactPhone.value.replace(/[^0-9]/g, '').substring(0, 11)
}

// 自动填写手机号
const autoFillPhone = async () => {
  try {
    // 调用API获取用户信息
    const response = await get('/api/user/profile')
    
    if (response.success && response.data.phone_number) {
      contactPhone.value = response.data.phone_number
      uni.showToast({
        title: '已自动填写',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '您还未绑定手机号',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取用户手机号失败:', error)
    uni.showToast({
      title: '获取失败，请手动输入',
      icon: 'none'
    })
  }
}

// 优惠券输入处理
const onCouponInput = () => {
  updatePriceInfo()
}

// 停车类型选择处理
const selectParkingType = (type: string) => {
  parkingType.value = type
  updatePriceInfo()
}

// 切换预约须知显示状态
const toggleBookingNotice = () => {
  showBookingNotice.value = !showBookingNotice.value
}

// 组合日期和时间
const combineDateTime = (date: string, time: string) => {
  if (!date || !time) return ""
  return `${date}T${time}:00`
}

// 更新价格信息
const updatePriceInfo = async () => {
  if (!parkingLotId.value || !entryDate.value || !entryTime.value || !exitDate.value || !exitTime.value) {
    priceInfo.value = null
    return
  }

  try {
    const entryDateTime = combineDateTime(entryDate.value, entryTime.value)
    const exitDateTime = combineDateTime(exitDate.value, exitTime.value)

    const response = await getParkingPrice(parkingLotId.value, entryDateTime, exitDateTime, couponCode.value, parkingType.value)

    if (response.success) {
      priceInfo.value = response.data
    }
  } catch (error) {
    console.error("获取价格信息失败:", error)
    uni.showToast({
      title: "获取价格失败",
      icon: "none",
    })
  }
}

// 显示优惠券列表
const showCouponList = async () => {
  try {
    const response = await getAvailableCoupons()
    if (response.success) {
      availableCoupons.value = response.data
      showCouponModal.value = true
    }
  } catch (error) {
    console.error("获取优惠券列表失败:", error)
    uni.showToast({
      title: "获取优惠券失败",
      icon: "none",
    })
  }
}

// 关闭优惠券弹窗
const closeCouponModal = () => {
  showCouponModal.value = false
}

// 选择优惠券
const selectCoupon = (coupon: any) => {
  couponCode.value = coupon.code
  showCouponModal.value = false
  updatePriceInfo()

  uni.showToast({
    title: `已选择：${coupon.name}`,
    icon: "success",
  })
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ""
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
}

// 格式化价格
const formatPrice = (price: number) => {
  if (typeof price !== "number" || isNaN(price)) return "0.00"
  return price.toFixed(2)
}

// 提交预定
const submitBooking = async () => {
  if (!canSubmit.value) return

  // 检查车牌号是否为空
  if (!licensePlate.value.trim()) {
    uni.showToast({
      title: "请输入车牌号",
      icon: "none",
    })
    return
  }

  // 验证联系手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(contactPhone.value)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    })
    return
  }

  // 验证时间
  const entryDateTime = combineDateTime(entryDate.value, entryTime.value)
  const exitDateTime = combineDateTime(exitDate.value, exitTime.value)
  const entryDateObj = new Date(entryDateTime)
  const exitDateObj = new Date(exitDateTime)
  const now = new Date()

  if (exitDateObj <= entryDateObj) {
    uni.showToast({
      title: "离场时间必须晚于入场时间",
      icon: "none",
    })
    return
  }

  if (entryDateObj < now) {
    uni.showToast({
      title: "入场时间不能早于当前时间",
      icon: "none",
    })
    return
  }

  loading.value = true

  try {
    const orderData = {
      parking_lot_id: parkingLotId.value,
      entry_time: entryDateTime,
      exit_time: exitDateTime,
      license_plate: licensePlate.value,
      contact_phone: contactPhone.value,
      coupon_code: couponCode.value || undefined,
      parking_type: parkingType.value,
    }

    const response = await createParkingOrder(orderData)

    if (response.success) {
      uni.showModal({
        title: "预定成功",
        content: `订单号：${response.data.order_number}\n应付金额：¥${response.data.final_amount || 0}\n是否立即支付？`,
        confirmText: "立即支付",
        cancelText: "稍后支付",
        success: async (res) => {
          if (res.confirm) {
            // 用户选择立即支付
            try {
              uni.showLoading({
                title: "支付准备中...",
                mask: true,
              })

              // 获取用户openid
              const openid = await getUserOpenid()

              uni.hideLoading()
              uni.showLoading({
                title: "支付中...",
                mask: true,
              })

              // 发起支付
              const payResult = await initiatePayment({
                orderId: response.data.order_id,
                openid: openid
              })

              uni.hideLoading()

              if (payResult.success) {
                if (payResult.mock) {
                  // 模拟支付成功
                  uni.showToast({
                    title: "模拟支付成功",
                    icon: "success",
                  })
                } else {
                  // 真实支付成功
                  uni.showToast({
                    title: "支付成功",
                    icon: "success",
                  })
                }

                // 跳转到订单详情页面，展示地址与联系电话
                setTimeout(() => {
                  uni.navigateTo({
                    url: `/pages/order-detail/order-detail?orderId=${response.data.order_id}`,
                  })
                }, 800)
              } else if (payResult.cancelled) {
                // 用户取消支付
                uni.showToast({
                  title: "支付已取消",
                  icon: "none",
                })
              } else {
                // 支付失败
                throw new Error(payResult.message || "支付失败")
              }
            } catch (error) {
              uni.hideLoading()
              console.error("支付失败:", error)
              uni.showToast({
                title: "支付失败，请到订单页面重试",
                icon: "none",
              })
              // 跳转到订单详情
              setTimeout(() => {
                uni.navigateTo({
                  url: `/pages/order-detail/order-detail?orderId=${response.data.order_id}`,
                })
              }, 1200)
            }
          } else {
            // 用户选择稍后支付，跳转到订单详情查看信息
            uni.navigateTo({
              url: `/pages/order-detail/order-detail?orderId=${response.data.order_id}`,
            })
          }
        },
      })
    } else {
      throw new Error(response.message || "预定失败")
    }
  } catch (error: any) {
    console.error("创建订单失败:", error)
    uni.showToast({
      title: error.message || "预定失败",
      icon: "none",
    })
  } finally {
    loading.value = false
  }
}

// 获取停车场信息
const loadParkingLotInfo = async () => {
  if (!parkingLotId.value) return

  try {
    const response = await getParkingLotById(parkingLotId.value)
    if (response.success) {
      parkingLotInfo.value = response.data
    }
  } catch (error) {


    console.error("获取停车场信息失败:", error)
  }
}


// 页面加载时获取参数
onLoad((options: any) => {
  console.log("预定页面加载完成，参数:", options)

  // 从页面参数获取停车场ID
  if (options.parkingLotId) {
    parkingLotId.value = parseInt(options.parkingLotId)
    console.log("获取到停车场ID:", parkingLotId.value)
    loadParkingLotInfo()
  } else {
    uni.showModal({
      title: "提示",
      content: "请先选择停车场",
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }

  // 初始化默认时间
  initDefaultTimes()

  // 自动填写联系手机号
  autoFillPhone()

  // 如果有停车场ID，立即计算价格
  if (parkingLotId.value) {
    updatePriceInfo()
  }
})
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.header {
  background-color: #fff;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.parking-info {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx 40rpx;
}

.info-row {
  display: flex;
  margin-bottom: 20rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  font-size: 28rpx;
  width: 140rpx;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  font-size: 28rpx;
  flex: 1;
}
.copy-tip-inline {
  margin-left: 12rpx;
  font-size: 22rpx;
  color: #aaa;
}
.address-text {
  color: #007aff;
}

.section {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.time-selector {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.time-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time-label {
  color: #666;
  font-size: 28rpx;
  width: 140rpx;
}

.datetime-picker {
  display: flex;
  gap: 20rpx;
  flex: 1;
  margin-left: 20rpx;
}

.datetime-value {
  color: #333;
  font-size: 28rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  flex: 1;
  text-align: center;
  min-width: 200rpx;
}

.time-value {
  color: #333;
  font-size: 28rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  flex: 1;
  margin-left: 20rpx;
  text-align: center;
}

.license-input {
  display: flex;
}

.license-field {
  flex: 1;
  padding: 25rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: #333;
  background-color: #fff;
}

.license-field:focus {
  border-color: #007aff;
}

/* 联系手机号输入样式 */
.phone-input {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.phone-field {
  flex: 1;
  padding: 25rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: #333;
  background-color: #fff;
}

.phone-field:focus {
  border-color: #007aff;
}

.auto-fill-btn {
  padding: 20rpx 30rpx;
  background-color: #f0f8ff;
  color: #007aff;
  border: 1rpx solid #007aff;
  border-radius: 8rpx;
  font-size: 26rpx;
  white-space: nowrap;
}

.auto-fill-btn:active {
  background-color: #e6f3ff;
}

.phone-tips {
  margin-top: -10rpx;
  margin-bottom: 10rpx;
}

.tips-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

.coupon-selector {
  display: flex;
  gap: 20rpx;
}

.coupon-input {
  flex: 1;
  padding: 25rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
}

.coupon-input:focus {
  border-color: #007aff;
}

.coupon-btn {
  padding: 25rpx 30rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  white-space: nowrap;
}

.price-details {
  background-color: #f8f8f8;
  padding: 30rpx;
  border-radius: 8rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.price-row:last-child {
  margin-bottom: 0;
}

.price-row.total {
  border-top: 1rpx solid #ddd;
  padding-top: 20rpx;
  margin-top: 20rpx;
  font-weight: bold;
}

.price-label {
  color: #666;
  font-size: 28rpx;
}

.price-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.price-value.discount {
  color: #ff4757;
}

.total .price-label,
.total .price-value {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 30rpx 40rpx;
  border-top: 1rpx solid #eee;
}

.submit-btn {
  width: 100%;
  padding: 30rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.submit-btn.disabled {
  background-color: #ccc;
  color: #999;
}

.coupon-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  width: 80%;
  max-height: 70%;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 48rpx;
  color: #999;
  line-height: 1;
}

.coupon-list {
  max-height: 60vh;
  overflow-y: auto;
}

.coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.coupon-item:last-child {
  border-bottom: none;
}

.coupon-item:active {
  background-color: #f8f8f8;
}

.coupon-info {
  flex: 1;
}

.coupon-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.coupon-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
}

.coupon-expiry {
  font-size: 24rpx;
  color: #999;
}

.coupon-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  border-radius: 8rpx;
  margin-left: 20rpx;
}

.value-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}

.empty-coupon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.manual-input-toggle {
  margin-top: 20rpx;
  padding: 16rpx 0;
  text-align: center;
  border-top: 1rpx solid #eee;
}

.toggle-text {
  font-size: 26rpx;
  color: #007aff;
  text-decoration: underline;
}

.license-input {
  margin-top: 20rpx;
}

.license-textarea {
  height: 80rpx;
  line-height: 32rpx;
  resize: none;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

.coupon-textarea {
  height: 80rpx;
  line-height: 32rpx;
  resize: none;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

/* 价格提示样式 */
.price-tips {
  margin-top: 30rpx;
  padding: 24rpx;
  background-color: #f0f8ff;
  border-radius: 8rpx;
  border-left: 4rpx solid #007aff;
}

.tips-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 16rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.tips-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

.price-value.description {
  color: #007aff;
  font-weight: 500;
  word-break: break-all;
  white-space: pre-wrap;
}

/* 停车类型选择样式 */
.parking-type-selector {
  margin-top: 20rpx;
}

.type-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.type-option {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border: 2rpx solid #e0e0e0;
  border-radius: 16rpx;
  transition: all 0.3s ease;
  position: relative;
}

.type-option.active {
  border-color: #007aff;
  background: #f0f8ff;
}

.type-icon {
  font-size: 48rpx;
  margin-right: 24rpx;
}

.type-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.type-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.type-desc {
  font-size: 26rpx;
  color: #666;
}

.type-price {
  font-size: 28rpx;
  color: #007aff;
  font-weight: 500;
}

.type-check {
  font-size: 36rpx;
  color: #007aff;
  font-weight: bold;
}

.single-type-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  margin-top: 20rpx;
}

.single-type-info .type-icon {
  font-size: 48rpx;
  margin-right: 24rpx;
}

.type-text {
  font-size: 30rpx;
  color: #666;
}

/* 预约须知样式 */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.toggle-icon {
  font-size: 24rpx;
  color: #666;
  transition: transform 0.3s ease;
}

.toggle-icon.expanded {
  transform: rotate(0deg);
}

.booking-notice {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #007aff;
}

.notice-section {
  margin-bottom: 24rpx;
}

.notice-section:last-child {
  margin-bottom: 0;
}

.notice-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.notice-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.notice-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  padding-left: 16rpx;
  position: relative;
}

.notice-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12rpx;
  width: 4rpx;
  height: 4rpx;
  background-color: #999;
  border-radius: 50%;
}
</style>
